<template>
    <Popup class="tech-result-page" v-model="showResult" position="bottom" :overlay="false" >
        <div class="result-icon">
            {{isError ? '错误' : '成功'}}
        </div>
        <div class="result-title">{{resultTitle}}</div>
        <div class="result-desc">{{resultDesc}}</div>
        <div class="result-page-btns">
            <slot name="btns">
                <Button class="tech-btn" type="primary" size="large" @click="close">{{btnText}}</Button>
            </slot>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
export default {
    name: 'ResultPage',
    components: {
        Popup,
        Button,
    },
    computed: {},
    data() {
        return {
            resultTitle: '',
            resultDesc: '',
            isError: false,
            showResult: false,
            btnText: '关闭',
        };
    },
    methods: {
        show() {
            this.showResult = true;
        },
        close() {
            this.isError = false;
            this.showResult = false;
            this.resultTitle = '';
            this.resultDesc = '';
            this.$emit('close');
        },
        success(title, desc, btnText) {
            this.show();
            this.isError = false;
            this.resultTitle = title;
            this.resultDesc = desc;
            this.btnText = btnText | '关闭';
        },
        error(title, desc, btnText) {
            this.show();
            this.isError = true;
            this.resultTitle = title;
            this.resultDesc = desc;
            this.btnText = btnText | '关闭';
        },
    },
};
</script>

<style lang="less" scoped>
    .tech-result-page {
        height: 100vh;
        text-align: center;
        .result-icon {
            .m-t(60);
        }
        .result-title {
            .font-size-lg();
            font-weight: @font-weight-bold;
        }
        .result-desc {
            .font-size-sm();
            color: @text-color;
        }
        .result-page-btns {
            .m(@gap-md);
        }
    }
</style>

